<template>
  <div class="PlanHome">
    <div class="review-box" :class="flightShow ? 'review-box-min' : 'review-box-max'">
      <div class="icon"></div>
      <div class="search">
        <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
      </div>
      <el-tabs v-model="activeName" width="100%">
        <el-tab-pane label="待审核计划" name="first">
          <pending-review></pending-review>
        </el-tab-pane>
        <el-tab-pane label="已审核计划" name="second">
          <reviewed></reviewed>
        </el-tab-pane>
        <el-tab-pane label="计划受理" name="third">计划受理</el-tab-pane>
        <el-tab-pane label="我的待办" name="fourth">我的待办</el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="flightShow" class="flight-box">
      <flight-plan></flight-plan>
      <audit-two></audit-two>
    </div>
  </div>
</template>
<script>
import PendingReview from './PendingReview'
import Reviewed from './Reviewed'
import FlightPlan from './FlightPlan'
import AuditTwo from './AuditTwo'
import { mapState } from 'vuex'
export default {
  name: 'PlanHome',
  components: { PendingReview, Reviewed, FlightPlan, AuditTwo },
  data() {
    return {
      activeName: 'first',
      input: ''
    }
  },
  computed: {
    ...mapState('app', ['flightShow'])
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
$flight-box-height: 450px;
.PlanHome {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  //   background-color: #f3f3f3;
  background-color: #031125;
  color: #fff;
  .review-box {
    overflow: hidden;
    // border: 16px solid #f3f3f3;
    border: 16px solid #031125;
    background: rgba(16, 34, 67, 0.8);
    /deep/.el-tabs__item {
      color: #fff;
    }
    /deep/.el-tabs__item.is-active {
      background: rgba(220, 138, 44, 1) !important;
    }
    // /deep/.el-tabs__item:hover {
    //   color: #409eff;
    // }
    .select {
      position: absolute;
      top: 106px;
      right: 44px;
    }
    .icon {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 44px;
      top: 40px;
      background: url('../../assets/rightNav/Group 8.png') center no-repeat;
      border-radius: 10px;
      z-index: 10;
    }
    .search {
      width: 260px;
      height: 38px;
      position: absolute;
      top: 40px;
      right: 92px;
      z-index: 10;
      /deep/ .el-input {
        .el-input__inner {
          background-color: transparent;
          color: #fcfdff;
        }
      }
    }
    /deep/ .el-tabs {
      .el-tabs__nav-wrap::after {
        background-color: transparent;
      }
      .is-active {
        color: #fff;
      }
      .el-tabs__active-bar {
        background-color: transparent;
      }
      #tab-first {
        background-color: #2c84dc;
        // background-color: #ebb563;
        border-radius: 15px;
        width: 95px;
        height: 35px;
        line-height: 35px;
        margin: 20px 10px 0 0;
        text-align: center;
        padding: 0;
      }
      #tab-second {
        background-color: #2c84dc;
        border-radius: 15px;
        width: 95px;
        height: 35px;
        line-height: 35px;
        margin-right: 10px;
        text-align: center;
        padding: 0;
      }
      #tab-third {
        background-color: #2c84dc;
        border-radius: 15px;
        width: 95px;
        height: 35px;
        line-height: 35px;
        margin-right: 10px;
        text-align: center;
        padding: 0;
      }
      #tab-fourth {
        background-color: #2c84dc;
        border-radius: 15px;
        width: 95px;
        height: 35px;
        line-height: 35px;
        margin-right: 10px;
        text-align: center;
        padding: 0;
      }
    }

    .pending-box {
      width: 100%;
      //   background-color: #fff;
      background: rgba(16, 34, 67, 0.8);
      border: 1px solid rgba(8, 75, 108, 1);
      border-radius: 4px;
    }
    .reviewed-box {
      width: 100%;
      //   background-color: #fff;
      background: rgba(16, 34, 67, 0.8);
      border: 1px solid rgba(8, 75, 108, 1);
      border-radius: 4px;
      margin-left: 18px;
    }
  }
  .review-box-max {
    height: 97%;
  }
  .review-box-min {
    height: calc(95vh - #{$flight-box-height});
  }
  .flight-box {
    height: $flight-box-height;
    // background-color: #fff;
    background: rgba(16, 34, 67, 0.8);
    border-left: 16px solid #031125;
    border-right: 16px solid #031125;
  }
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(141, 139, 139, 0.2);
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: #f3f3f3;
  }
}
</style>
